ナビゲーション Navigation UI

目的

アプリに注意を向けることなく、アプリの構造と目的をサポート

ナビゲーション、メニューであることを意識しない自然さ by apple

ユーザーが、あるポイントから別のポイントに移動するために存在

少なくとも2つ以上の項目を含む

項目には、機能が含まれる。

ユーザーが操作するのを手助けする

ルール

常に明確なパスを提供

アプリのどこにいるのか、そして次の目的地に行く方法を常に知っておく必要

コンテンツのパス

論理的で予測可能、追跡しやすい

一般に、各画面への1つのパスを人々に与える

すばやく簡単にアクセスできる最小限の動作

既に標準的に使われているUIを用いる

現在の位置が画面上などに表示されている

配置

見つけやすい

操作しやすい

重要

どこまで戻るべきか考えて実装すること

内容によって、実装レベルが変わる

状態管理

hr.icon

アーキテクチャ

階層ナビゲーション

目的地に到達するまで、画面ごとに1つの選択

別の目的地に行くには、ステップをたどるか、最初からやり直して別の選択を行う必要

例:wordpressのブログ

https://developer.apple.com/design/human-interface-guidelines/ios/images/NavigationHierarchical-Graphic_2x.png

フラットナビゲーション

複数のコンテンツカテゴリを切り替え

例

https://developer.apple.com/design/human-interface-guidelines/ios/images/NavigationFlat-Graphic_2x.png

コンテンツ駆動型 エクスペリエンス駆動型 ナビゲーション

コンテンツ内を自由に移動するか、コンテンツ自体がナビゲーションを定義

例

ゲーム

https://developer.apple.com/design/human-interface-guidelines/ios/images/NavigationExperienceDriven-Graphic_2x.png

hr.icon

見た目

永続的ナビゲーションと一時的ナビゲーション

永続的ナビゲーション

一時的ナビゲーション